<template>
  <div class="card" v-loading="loading">
    <el-tabs v-model="active">
      <!-- 基本信息 -->
      <el-tab-pane label="课程简介" name="0">
        <courseInfo
          :showRoot="showRoot"
          enterType="manager"
          :status="$route.query.status"
          :form="form"
        ></courseInfo>
      </el-tab-pane>
      <!-- 课程信息 -->
      <el-tab-pane label="课程内容" name="1">
        <div class="flex">
          <!-- 树列表 -->
          <div class="taskListBox">
            <div class="taskListBox_title flexBet">
              <div class="courseName overTxt shou">
                <tooltip
                  position="bottom-start"
                  :text="form.courseName"
                  width="100%"
                />
              </div>
              <div @click="handlechange('course')" class="allExpand flex shou">
                <img
                  v-if="!isClose"
                  src="@/assets/images/courseAdd/expand.png"
                  alt="加载失败"
                />
                <img v-else src="@/assets/images/courseAdd/shrink.png" alt="加载失败"/>
                {{ !isClose ? '全部展开' : '全部收起' }}
              </div>
            </div>
            <div class="taskListBox_btns flexBet">
              <div @click="handleScoreBox" class="btn_item">
                <div class="score_img"></div>
                课程配分
              </div>
            </div>
            <div class="detail_height">
              <courseTrees
                ref="course_trees_ref"
                :type="type"
                :data="courseIndexTree"
                @handleClick="handleClick"
              >
              </courseTrees>
            </div>
          </div>
          <!-- 章节信息 -->
          <div class="taskInfoBox">
            <div class="topLine">
              <tooltip :text="dynamicTitle" width="100%"></tooltip>
            </div>
            <!-- 任务 -->
            <div class="box">
              <addTaskForm
                :status="$route.query.status"
                :tabIndex="active"
                v-if="selectedType == 1 || selectedType == 2"
                :selectedTaskId="selectedId"
                :type="type"
                :courseForm="form"
                :selectedType="selectedType"
                enterType="manager"
              >
              </addTaskForm>
              <addContentForm
                :showRoot="showRoot"
                :status="$route.query.status"
                :tabIndex="active"
                v-else-if="selectedType == 3 || selectedType == 4"
                :topicCategoryId="topicCategoryId"
                :selectedContentId="selectedId"
                :type="type"
                enterType="manager"
                :courseForm="form"
              >
              </addContentForm>
              <el-empty
                v-else
                style="margin-top: 80px"
                description="暂无信息~"
              ></el-empty>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- 工学一体文件 -->
      <el-tab-pane
        label="课程资料"
        name="2"
        v-if="form.courseType == 3 && showRoot"
      >
        <div class="baseInfo">
          <el-form style="margin-top: 20px" :model="form" label-width="130px">
            <el-row>
              <!-- 说课视频 -->
              <el-col :span="12">
                <div class="label_text">说课视频</div>
                <div class="flex more_files">
                  <!-- 上传视频 -->
                  <uploadFile
                    :type="type == 'edit' ? 'upload' : type"
                    :uploadType="2"
                    :maxVideoSize="300"
                    :uuid="form.dirName"
                    :maxNum="2"
                    :ossType="2"
                    :isShowName="true"
                    accept=".mp4,.webm"
                    :echoFile="
                      form.courseVideo ? JSON.parse(form.courseVideo) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <!-- 课堂实录 -->
              <el-col :span="12">
                <div class="label_text">课堂实录</div>
                <div class="flex more_files">
                  <!-- 上传视频 -->
                  <uploadFile
                    :type="type == 'edit' ? 'upload' : type"
                    :uploadType="2"
                    :maxVideoSize="300"
                    :uuid="form.dirName"
                    :maxNum="2"
                    :ossType="2"
                    :isWrap="true"
                    :isShowName="true"
                    accept=".mp4,.webm"
                    :echoFile="
                      form.classRecord ? JSON.parse(form.classRecord) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <div
              style="
                  border-bottom: 1px dashed #eeeeee;
                  margin: 20px 20px 10px 20px;
                "
            ></div>
            <el-row>
              <el-col :span="12">
                <div class="label_text">1.《人才培养方案》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.talentTrainingProgram
                        ? JSON.parse(form.talentTrainingProgram)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">2.《工学一体化课程校本转化建议》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.courseStandardAdvice
                        ? JSON.parse(form.courseStandardAdvice)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">
                  3.《课程标准(校本转化)/学习任务设计》
                </div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.taskDesign ? JSON.parse(form.taskDesign) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">4.《课程考核方案》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.assessmentPlan ? JSON.parse(form.assessmentPlan) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">5.《学习任务分析》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.taskAnalysis ? JSON.parse(form.taskAnalysis) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">6.《学习任务教学活动策划》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.activityPlanningTable
                        ? JSON.parse(form.activityPlanningTable)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">7.《学习任务考核方案》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.taskAssessmentPlan
                        ? JSON.parse(form.taskAssessmentPlan)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">8.《学习任务工作页》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="form.workPage ? JSON.parse(form.workPage) : []"
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">9.《学习任务信息页》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.informationPage
                        ? JSON.parse(form.informationPage)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">10.《教学进度计划》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.teachingProgressPlan
                        ? JSON.parse(form.teachingProgressPlan)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">11.《教学活动方案》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.teachingActivityPlan
                        ? JSON.parse(form.teachingActivityPlan)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">
                  12.《工学一体化课程终结性考核试题》
                </div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.finalAssessmentTopic
                        ? JSON.parse(form.finalAssessmentTopic)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">
                  13.《课程专家开发花名册/课程教师团队花名册》
                </div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.expertDevelopRoster
                        ? JSON.parse(form.expertDevelopRoster)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">
                  14. 更多文档
                </div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.moreMaterialsDoc
                        ? JSON.parse(form.moreMaterialsDoc)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detailbottom flexEnd" style="bottom: 40px; right: 40px">
          <el-button
            v-preventReClick
            v-if="type == 'detail'"
            type="primary"
            @click="cancel"
          >退 出
          </el-button
          >
        </div>
      </el-tab-pane>
      <!-- 通用课程资料 -->
      <el-tab-pane
        label="课程资料"
        name="2"
        v-if="form.courseType != 3 && showRoot"
      >
        <div class="baseInfo">
          <el-form style="margin-top: 20px" :model="form" label-width="130px">
            <el-row>
              <!-- 说课视频 -->
              <el-col :span="12">
                <div class="label_text">说课视频</div>
                <div class="flex more_files">
                  <!-- 上传视频 -->
                  <uploadFile
                    :type="type == 'edit' ? 'upload' : type"
                    :uploadType="2"
                    :maxVideoSize="300"
                    :uuid="form.dirName"
                    :maxNum="2"
                    :ossType="2"
                    :isShowName="true"
                    accept=".mp4,.webm"
                    :echoFile="
                      form.courseVideo ? JSON.parse(form.courseVideo) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <!-- 课堂实录 -->
              <el-col :span="12">
                <div class="label_text">课堂实录</div>
                <div class="flex more_files">
                  <!-- 上传视频 -->
                  <uploadFile
                    :type="type == 'edit' ? 'upload' : type"
                    :uploadType="2"
                    :maxVideoSize="300"
                    :uuid="form.dirName"
                    :maxNum="2"
                    :ossType="2"
                    :isWrap="true"
                    :isShowName="true"
                    accept=".mp4,.webm"
                    :echoFile="
                      form.classRecord ? JSON.parse(form.classRecord) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <div
              style="
                  border-bottom: 1px dashed #eeeeee;
                  margin: 20px 20px 10px 20px;
                "
            ></div>
            <el-row>
              <el-col :span="12">
                <div class="label_text">1.《课程标准》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.taskDesign ? JSON.parse(form.taskDesign) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">2.《考核方案》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.assessmentPlan ? JSON.parse(form.assessmentPlan) : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">3.《教学计划》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.teachingProgressPlan
                        ? JSON.parse(form.teachingProgressPlan)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="label_text">4.《教案》</div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.teachingActivityPlan
                        ? JSON.parse(form.teachingActivityPlan)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="label_text">
                  5. 更多文档
                </div>
                <div class="flex more_files">
                  <!-- 上传文件 -->
                  <uploadFile
                    type="view"
                    :uploadType="3"
                    :maxFileSize="200"
                    :maxNum="5"
                    :ossType="2"
                    :uuid="form.dirName"
                    accept=".pdf,.docx,.doc,.xls,.xlsx"
                    :echoFile="
                      form.moreMaterialsDoc
                        ? JSON.parse(form.moreMaterialsDoc)
                        : []
                    "
                  >
                  </uploadFile>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detailbottom flexEnd" style="bottom: 40px; right: 40px">
          <el-button
            v-preventReClick
            v-if="type == 'detail'"
            type="primary"
            @click="cancel"
          >退 出
          </el-button
          >
        </div>
      </el-tab-pane>
      <!-- 课程数据 -->
      <el-tab-pane label="课程数据" name="3">
        <courseData :tabindex="active"></courseData>
      </el-tab-pane>
      <!-- 学生优秀成果 -->
      <el-tab-pane label="学生优秀成果" name="4">
        <div class="flex">
          <!-- 树列表 -->
          <div class="taskListBox">
            <div class="taskListBox_title flexBet">
              <div class="courseName overTxt shou">
                <tooltip
                  position="bottom-start"
                  :text="form.courseName"
                  width="100%"
                />
              </div>
              <div
                @click="handlechange('addStudyResults')"
                class="allExpand flex shou"
              >
                <img
                  v-if="!isClose_addStudyResults"
                  src="@/assets/images/courseAdd/expand.png"
                  alt="加载失败"
                />
                <img v-else src="@/assets/images/courseAdd/shrink.png" alt="加载失败"/>
                {{ !isClose_addStudyResults ? '全部展开' : '全部收起' }}
              </div>
            </div>

            <div class="detail_height">
              <courseTrees
                ref="addStudyResults_trees_ref"
                :type="type"
                :data="resultIndexTree"
                @handleClick="handleClick_studyResults"
              >
              </courseTrees>
            </div>
          </div>
          <!-- 章节信息 -->
          <div class="taskInfoBox">
            <div class="topLine">
              <tooltip :text="dynamicTitle_studyResults" width="100%"></tooltip>
            </div>
            <!-- 任务 -->
            <div>
              <!--selectedType 1 任务 2 目录 3 内容 4 终结性考核 selectedId-->
              <addStudyResults
                :preview="preview"
                :tabIndex="active"
                :selectedTaskId="selectedId_studyResults"
                type="detail"
                :courseForm="form"
                :selectedType="selectedType_studyResults"
              ></addStudyResults>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <scoreDialog
      :courseId="form.courseId"
      :courseType="form.courseType"
      :open.sync="score_open"
      type="detail"
    ></scoreDialog>
  </div>
</template>

<script>
import { getCourseDetial } from '@/api/course/course'
import { getCourseIndexTree } from '@/api/course/course'
import addStudyResults from '@/components/addStudyResults'
import uploadFile from '@/components/uploadFile/uploadFile'

import courseData from '@/views/tea_course/components/courseData'
import scoreDialog from '@/views/tea_course/components/scoreDialog'
import courseInfo from '@/views/tea_course/components/courseInfo'
import courseTrees from '@/views/tea_course/components/courseTrees'
import addContentForm from '@/views/tea_course/components/addContentForm'
import addTaskForm from '@/views/tea_course/components/addTaskForm'

import { formatTreeData } from '@/views/tea_course/formatTreeData'

export default {
  name: 'addCourse',
  components: {
    addStudyResults,
    courseData,
    uploadFile,
    courseTrees,
    courseInfo,
    addContentForm,
    addTaskForm,
    scoreDialog
  },
  props: {},
  dicts: [],
  data() {
    return {
      showRoot: true,
      //用于成果的文件预览显示lable
      preview: {
        coursePath: '',
        courseName: '',
        studentId: '',
        studentName: ''
      },
      dynamicTitle_studyResults: '',
      selectedId_studyResults: '',
      selectedType_studyResults: '',

      question_id: '',
      vuedraggable_disabled: false,
      uuid: '',
      topicCategoryId: '',
      dynamicTitle: '详情',
      loading: false,
      // 树列表
      // 拖拽
      sortChapterItem: '',
      sortType: '',
      ccCourseChapterTemporaryList: [],
      rejectOpen: false,
      type: this.$route.query.type,
      // 添加子目录组件
      addLinkOpen: false,
      addLinkSort: null,
      //子目录父级id
      indexParentId: '',
      // 添加子目录组件
      addContentOpen: false,
      addContentSort: null,

      addLinkCurChapterId: '',
      addLinkCurChapterIndex: '',
      curAddTaskSort: '',
      //分值配置
      score_open: false,
      showExpot: false,
      addTaskOpen: false,
      addTaskSort: null,
      /* 全部展开 */
      isClose: true,
      isClose_addStudyResults: true,
      active: '0',
      changed: false,
      selectedId: '',
      selectedType: '',
      selectedTaskId: '',
      selectedTaskIndex: '',
      selectedChapterId: '',
      selectedChapterIndex: '',
      vuecutshow: false,
      // 表单参数
      form: {
        courseId: '',
        courseName: '',
        coursePic: '',
        framePic: [],
        preCourseId: '',
        jumpStatus: 0,
        passAllStatus: 0,
        principalId: this.$store.getters.teacherId,
        remark: '',
        status: '',
        teacherIds: '',
        workstationIds: '',
        schoolId: '',
        teachingObjectives: '',
        describe: '',
        content: '',
        studyTime: undefined,
        teachingMethod: '',
        studyTools: '',
        studyData: '',
        teachingPlacePic: [],
        teachingPlace: ''
      },
      // 表单校验
      rules: {
        courseName: [
          { required: true, message: '课程名称不能为空', trigger: 'blur' }
        ],
        studyTime: [
          { required: true, message: '基准学时不能为空', trigger: 'change' }
        ],
        courseType: [
          { required: true, message: '请选择课程类型', trigger: 'change' }
        ],
        majorType: [
          { required: true, message: '请选择专业大类', trigger: 'change' }
        ],
        majorNameId: [
          { required: true, message: '请选择专业名称', trigger: 'change' }
        ],
        coursePic: [
          { required: true, message: '课程封面不能为空', trigger: 'blur' }
        ],
        principalId: [
          { required: true, message: '主讲教师不能为空', trigger: 'change' }
        ]
      },
      // 任务表单
      //   教师列表
      teachers: [],
      workstations: [],
      commonTeacher: [],
      // 章节index
      chapterIndex: '',
      // 任务添加的时候用于判断删除 自增indexid
      tid: 0,
      majorNameList: [],
      //课程目录树结构
      courseIndexTree: [],
      //学习成果树结构
      resultIndexTree: [],
      courseTemplate: null
    }
  },
  watch: {
    active: {
      handler(newValue) {
        if (newValue == '1') {
          if (this.courseIndexTree.length == 0) {
            //获取课程目录树结构
            this.getCourseIndexTree()
          }
        }
        if (newValue == '4') {
          if (this.resultIndexTree.length == 0) {
            //获取课程目录树结构
            this.getCourseIndexTree()
          }
        }
      }
    }
  },
  created() {
    //学校管理员可以看全部，分院只能看本院，教师没钱权限
    if (this.$route.query.from == 'recommend') {
      let str = this.$store.getters.roleId
      if (str == 'schoolAdmin') {
        this.showRoot = true
      }
      if (str == 'teacher') {
        this.showRoot = false
      }
      if (str == 'branchAdmin') {
        this.showRoot = this.$route.query.branchId == this.$store.getters.branchId;
      }
    }
    if (this.type == 'detail') {
      this.vuedraggable_disabled = true
    }
    if (this.$route.query.workstationId) {
      this.form.workstationIds = this.$route.query.workstationId
    }
  },
  mounted() {
    let title
    if (this.type == 'detail') {
      title = '课程详情'
    } else if (this.type == 'edit') {
      title = '编辑课程'
    } else {
      title = '审核课程'
    }
    const route = Object.assign({}, this.$route, {
      title: `${title}`
    })
    this.$store.dispatch('tagsView/updateVisitedView', route)
    this.getcourseInfo()
  },
  methods: {
    //点击优秀成果树结构
    handleClick_studyResults(e) {
      this.getPathToNode(this.courseIndexTree, e.id).then(async(path) => {
        this.preview = {
          coursePath: path ? path.join('/') : '',
          courseName: this.form.courseName,
          studentId: '',
          studentName: ''
        }
        this.dynamicTitle_studyResults = e.name
        this.selectedId_studyResults = e.id
        this.selectedType_studyResults = e.type
      })
    },
    // 用于生成xx/xxx/xxxx
    async getPathToNode(nodes, targetId, pathAccumulator = []) {
      for (const node of nodes) {
        // 如果当前节点匹配目标ID，说明路径构建完成，返回累积的路径
        if (node.id === targetId) {
          return [...pathAccumulator, node.name] // 包含当前节点名称
        }
        // 递归查找子节点中的路径
        if (node.children && node.children.length > 0) {
          // 将当前节点的名称添加到路径中，然后递归查找
          const result = await this.getPathToNode(node.children, targetId, [
            ...pathAccumulator,
            node.name
          ])
          if (result) {
            return result // 找到路径，返回
          }
        }
      }
      return null // 未找到目标节点，返回null
    },
    handleClick(e) {
      console.log('点击', e)

      this.dynamicTitle = e.name
      this.selectedId = e.id
      this.selectedType = e.type
    },
    // 展开关闭操作
    handlechange(e) {
      this['isClose_' + e] = !this['isClose_' + e]
      if (this['isClose_' + e]) {
        this.$refs[e + '_trees_ref'].expandAll()
      } else {
        this.$refs[e + '_trees_ref'].collapseAll()
      }
    },
    async getCourseIndexTree() {
      let res = await getCourseIndexTree(this.form.courseId)
      const { code, data } = res
      if (code == 200) {
        let formattedTreeData = formatTreeData(data.children)
        console.log(formattedTreeData, 'formatTreeData')
        if (this.active == 1) {
          this.courseIndexTree = formattedTreeData
        }
        if (this.active == 4) {
          this.resultIndexTree = formattedTreeData
        }
      }
    },
    /* 分值配置按钮 */
    handleScoreBox() {
      this.score_open = true
    },
    /* 获取课程信息 */
    async getcourseInfo() {
      let res = await getCourseDetial(this.$route.query.courseId)
      res.data.framePic = res.data.framePic ? res.data.framePic.split(',') : []
      res.data.teachingPlacePic = res.data.teachingPlacePic
        ? res.data.teachingPlacePic.split(',')
        : []
      res.data.teacherIds = res.data.teacherIds
        ? res.data.teacherIds.split(',')
        : ''
      let teachArr = []
      if (res.data.teacherIds) {
        for (const item of res.data.teacherIds) {
          teachArr.push(item - 0)
        }
      }
      res.data.teacherIds = teachArr
      //题库  props要用
      this.topicCategoryId = res.data.topicCategoryId
        ? res.data.topicCategoryId
        : ''
      this.form = JSON.parse(JSON.stringify(res.data))
      //是否是工学一体模版
      this.courseTemplate = this.form.courseTemplate
      this.loading = false
    },
    cancel() {
      this.$store.dispatch('tagsView/delView', this.$router.currentRoute)
      setTimeout(() => {
        this.$router.go(-1)
      }, 100)
    }
  }
}
</script>
<style scoped lang="scss">
.detailbottom {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  align-items: center;

  ::v-deep .el-button {
    padding: 0 24px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    border-radius: 8px;
    line-height: 38px;
    height: 40px;
  }
}

.baseInfo {
  height: calc(100vh - 120px - 72px - 72px);
  overflow: auto;
}

.card {
  margin: 15px auto 0 auto;
  width: 1200px;
  height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
  padding-top: 24px;
  box-shadow: 0 0 8px 0 rgba(9, 28, 61, 0.17);

  ::v-deep .el-tabs__item {
    height: 46px !important;
    line-height: 46px !important;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding-left: 73px;
  }

  ::v-deep .el-tabs__header {
    margin: 0 0 0 0;
  }
}

//树列表盒子
.taskListBox {
  width: 320px;
  max-height: calc(100vh - 190px);
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &_title {
    box-sizing: border-box;
    padding: 0 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;

    .courseName {
      width: 180px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 45px;
    }

    .allExpand {
      user-select: none;

      img {
        margin: auto 4px auto 0;
        width: 16px;
        height: 16px;
      }

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
    }
  }

  &_btns {
    padding: 8px 10px;

    .btn_item {
      cursor: pointer;
      user-select: none;
      width: 96px;
      height: 32px;
      background: #f7f9fa;
      border-radius: 8px;
      border: 1px solid #edeff0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;

      .exam_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/topic_collect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .score_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/score_collect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .task_img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        background-image: url("../../assets/images/courseAdd/asstask_collect.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      &:hover {
        .exam_img {
          background-image: url("../../assets/images/courseAdd/topic_collect_act.png");
        }

        .score_img {
          background-image: url("../../assets/images/courseAdd/score_collect_act.png");
        }

        .task_img {
          background-image: url("../../assets/images/courseAdd/asstask_collect_act.png");
        }

        color: #28b28b;
      }
    }
  }

  &_tip {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    padding: 0 0 12px 10px;
  }

  &_tree {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
  }
}

// 章节信息盒子
.taskInfoBox {
  flex: 1;

  .topLine {
    width: 800px;
    box-sizing: border-box;
    padding-left: 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 45px;
  }

  .box {
    height: calc(100vh - 330px);
  }
}

.framePic {
  .close {
    display: none;
  }
}

.framePic:hover {
  .close {
    display: block;
  }
}

.taskLine_actvie {
  background: rgba(5, 192, 173, 0.08);
}

.taskLine {
  width: 100%;
  height: 35px;

  .more {
    width: 18px;
    height: 12px;
    margin: 13px 7px 0 0;
  }

  .arrow90 {
    transform: rotate(0) !important;
  }

  .arrow {
    transition: all 0.5s;
    transform: rotate(-90deg);
    margin: auto 16px auto 15px;
    width: 16px;
    height: 16px;
  }

  .name {
    width: 184px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 35px;
  }

  .status {
    text-align: center;
    margin: auto 0 auto 3px;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    line-height: 16px;
  }
}

.taskLine:hover {
  background: rgba(5, 192, 173, 0.08);
}

.linkLine:hover {
  background: rgba(5, 192, 173, 0.08);
}

.linkLine {
  justify-content: space-between;
  align-items: center;
  height: 42px;

  .more {
    width: 18px;
    height: 12px;
    margin: 0 7px 0 0;
  }

  .statusblock {
    width: 76px;

    .status {
      margin-left: 18px;
      width: 56px;
      height: 16px;
      background: #ea3555;
      border-radius: 12px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
    }
  }

  .name {
    width: 200px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
  }
}

.uploadCourseFramePic {
  .uploadTip {
    line-height: 160px;
    height: 100px;
  }

  .upload-head {
    width: 102px;
    height: 102px;

    .add {
      width: 20px;
      height: 20px;
      margin: 25px auto 0 auto;
    }

    .cover {
      width: 100px;
      height: 100px;
    }
  }

  .upload-head:hover:after {
    line-height: 100px;
  }
}

// 上传封面样式
.uploadCourseCover {
  .uploadTip {
    line-height: 160px;
    height: 100px;
  }

  .upload-head {
    width: 162px;
    height: 102px;

    .add {
      width: 20px;
      height: 20px;
      margin: 25px auto 0 auto;
    }

    .cover {
      width: 160px;
      height: 100px;
      border-radius: 4px;
    }
  }

  .upload-head:hover:after {
    line-height: 100px;
  }
}

.w_374 {
  width: 374px;
}

.w_289 {
  width: 289px;
}

.topicListDiv {
  width: 100%;
  height: 600px;
}

.detail_height {
  width: 100%;
  overflow: auto;
  border-radius: 0 0 0 16px;
  height: calc(100vh - 236px);
}

.label_text {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  margin-top: 20px;
  padding-left: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.more_files {
  margin-top: 10px;
  padding-left: 130px;
  box-sizing: border-box;
}
</style>
